<template>
  <div class="bg">
    <ul>
      <li><h1>登录</h1></li>
      <li><el-input placeholder="请输入用户名" v-model="obj.username"></el-input></li>
      <li><el-input placeholder="请输入密码" v-model="obj.password"></el-input></li>
      <li><el-button type="primary" @click="login">登录</el-button></li>
    </ul>
  </div>
</template>

<script>
import {reqUserlogin} from "../../request/api.js"
import {mapGetters,mapActions} from "vuex"
export default {
  data(){
    return {
      obj:{
        username:"",
        password:""
      }
    }
  },
  computed:{
    ...mapGetters({
      user:"user"
    })
  },
  methods:{
    ...mapActions({
      changeuser:"changeuser"
    }),
    login(){
      reqUserlogin(this.obj).then(res=>{
        if(res.data.code==200){
          this.changeuser(res.data.list)
          this.$router.push('/index/home')
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
.bg{background: @primary;height: 100vh;position: relative;
  ul{width: 300px;background: white;border-radius: 10px;padding: 30px 80px;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    li{padding: 10px;text-align: center;
      .el-button{width: 100%;}
    }
  }
}

</style>